<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fireworks</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: black;
        }
        canvas {
            display: block;
            width: 100vw;
            height: 100vh;
        }
        #music-btn {
            position: absolute;
            top: 10px;
            left: 10px;
            background-color: white;
            border: none;
            padding: 5px;
            cursor: pointer;
            z-index: 10;
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <button id="music-btn" >播放音乐</button>
    <canvas id="canvas"></canvas>
    <audio id="background-music" src="music.mp3" preload="auto"></audio>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        class Firework {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.targetX = x;
                this.targetY = Math.random() * (canvas.height / 2); // Target is in the upper half of the canvas
                this.speed = 4; // Increased speed for better visibility
                this.trail = [];
                this.trailLength = 15; // Increased trail length
                this.hue = Math.random() * 360;
            }

            update() {
                this.trail.push({ x: this.x, y: this.y });
                if (this.trail.length > this.trailLength) {
                    this.trail.shift();
                }

                // Move vertically up
                this.y -= this.speed;

                if (this.y <= this.targetY) {
                    this.createParticles();
                    return true;
                }
                return false;
            }

            draw() {
                if (this.trail.length > 0) {
                    ctx.beginPath();
                    ctx.moveTo(this.trail[0].x, this.trail[0].y);
                    for (let i = 1; i < this.trail.length; i++) {
                        ctx.lineTo(this.trail[i].x, this.trail[i].y);
                    }
                    ctx.strokeStyle = `hsl(${this.hue}, 100%, 50%)`;
                    ctx.lineWidth = 4; // Increased line width for better visibility
                    ctx.stroke();
                }
            }

            createParticles() {
                for (let i = 0; i < 60; i++) { // Increased number of particles
                    particles.push(new Particle(this.x, this.targetY, this.hue));
                }
            }
        }

        class Particle {
            constructor(x, y, hue) {
                this.x = x;
                this.y = y;
                this.hue = hue;
                this.speed = Math.random() * 8 + 4; // Increased speed range
                this.angle = Math.random() * Math.PI * 2;
                this.friction = 0.97; // Adjusted friction for better effect
                this.gravity = 0.1;
                this.alpha = 1;
                this.decay = Math.random() * 0.02 + 0.01;
            }

            update() {
                this.speed *= this.friction;
                this.x += Math.cos(this.angle) * this.speed;
                this.y += Math.sin(this.angle) * this.speed + this.gravity;
                this.alpha -= this.decay;
                return this.alpha <= this.decay;
            }

            draw() {
                ctx.save();
                ctx.globalAlpha = this.alpha;
                ctx.beginPath();
                ctx.arc(this.x, this.y, 4, 0, Math.PI * 2); // Increased particle size
                ctx.fillStyle = `hsl(${this.hue}, 100%, 50%)`;
                ctx.fill();
                ctx.restore();
            }
        }

        let fireworks = [];
        let particles = [];

        function animate() {
            ctx.globalCompositeOperation = 'destination-out';
            ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.globalCompositeOperation = 'lighter';

            fireworks = fireworks.filter(firework => {
                firework.draw();
                return !firework.update();
            });

            particles = particles.filter(particle => {
                particle.draw();
                return !particle.update();
            });

            requestAnimationFrame(animate);
        }

        function createFireworks() {
            for (let i = 0; i < 5; i++) { // Number of fireworks per creation
                const x = Math.random() * canvas.width; // Random horizontal position
                const y = canvas.height; // Start from the bottom of the canvas
                fireworks.push(new Firework(x, y));
            }
        }

        // Create fireworks initially and at intervals
        window.onload = () => {
            createFireworks();
            setInterval(createFireworks, 3000); // Create new fireworks every 3 seconds
        };

        // Music control
        const musicBtn = document.getElementById('music-btn');
        const music = document.getElementById('background-music');
        let isPlaying = false;

        musicBtn.addEventListener('click', () => {
            if (isPlaying) {
                music.pause();
                musicBtn.textContent = '播放音乐';
            } else {
                music.play();
                musicBtn.textContent = '暂停音乐';
            }
            isPlaying = !isPlaying;
        });

        // Resize canvas on window resize
        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });

        animate();
    </script>
</body>
</html>
